<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="date">
              <el-date-picker v-model="date" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
                @change="(value) => {return dateChange(value,'searchForm')}" :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-if="admin_level == 0" prop="agent_name">
              <el-input v-model="searchForm.agent_name" clearable placeholder="请输入代理商名称"></el-input>
            </el-form-item>
            <el-form-item v-if="admin_level == 0 || admin_level == 1" prop="operator_name">
              <el-input v-model="searchForm.operator_name" clearable placeholder="请输入运营商名称"></el-input>
            </el-form-item>
            <el-form-item prop="company_name">
              <el-input v-model="searchForm.company_name" clearable placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.stop="search(true)">搜索</el-button>
              <el-button type="success" @click.stop="search">刷新</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column v-if="admin_level == 0" prop="agent_name" label="代理商"></el-table-column>
          <el-table-column v-if="admin_level == 0 || admin_level == 1" prop="operator_name" label="运营商"></el-table-column>
          <el-table-column prop="company_name" label="公司"></el-table-column>
          <el-table-column prop="order_total" label="订单总量"></el-table-column>
          <el-table-column prop="ok_order_num" label="订单完成量"></el-table-column>
          <el-table-column prop="cancel_order_num" label="订单取消量"></el-table-column>
          <el-table-column prop="total_price" label="流水金额(元)"></el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
          </el-pagination>
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDateFun } from '@/untils/common.js'
import { getDataTotalList } from '@/network/api.js'

export default {
  name: 'datatotal',
  data() {
    return {
      admin_level: -1,
      date: [
        new Date(new Date(new Date().toLocaleDateString('zh')).getTime()),
        new Date(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1)
      ],
      searchForm: {
        page: 1,
        limit: 10,
        start: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime()),
        end: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1),
        agent_name: '',
        operator_name: '',
        company_name: ''
      },
      table: [],
      count: 0
    }
  },
  created() {
    const info = this.$storage.get('info')
    if (info !== undefined && info !== null) {
      this.admin_level = info.admin_level
      this.search()
    } else {
      return this.$message.error('请先登录')
    }
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    dateChange(v, formName) {
      if (v === null) {
        this[formName].start = ''
        this[formName].end = ''
      } else {
        this[formName].start = v[0]
        this[formName].end = v[1]
      }
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getDataTotalList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
